<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="myCanvas" width="1400" height="750"></canvas>
		<script type="text/javascript">
			var numbers = [
				[
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				], //0
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				], //1
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				], //2
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //3
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				], //4
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //5
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //6
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				], //7
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //8
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 0, 0]
				], //9
				[
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0]
				] //10冒号:
			];

			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			ctx.beginPath();
			var balls = [];
			var date = new Date();

			//tu
			var img = new Image();

			img.src = "img/1216738982668.jpg"
			ctx.fillStyle = "cadetblue";
			ctx.fillRect(0, 0, 1400, 750);
			ctx.fill();

			var text = [0, 0, 10, 0, 0, 10, 0, 0];
			img.onload = function() {
				setInterval(function() {
					var data = new Date();
					ctx.clearRect(0, 0, 1400, 750)
					ctx.drawImage(img, 0, 0)

					if(data.getSeconds() != date.getSeconds()) {
						//判断个位  是十位
						var gw = date.getSeconds() % 10;
						addBall(1270, 10, gw);
						var sw1 = parseInt(date.getSeconds() / 10);
						var sw2 = parseInt(data.getSeconds() / 10);
						if(sw1 != sw2) {
							addBall(1110, 10, sw1);

						}
						//添加小球

						//秒数变
						date = data;
					}

					text[0] = parseInt(data.getHours() / 10);
					text[1] = data.getHours() % 10;
					text[3] = parseInt(data.getMinutes() / 10);
					text[4] = data.getMinutes() % 10;
					text[6] = parseInt(data.getSeconds() / 10);
					text[7] = data.getSeconds() % 10;

					for(var i = 0; i < text.length; i++) {
						if(i == 2) {
							drawNumber(i * 160 - 10, 10, text[i]);
						}
						if(i == 3 || i == 4) {
							drawNumber(i * 160 - 90, 10, text[i]);
						}
						if(i == 5) {
							drawNumber(i * 160 - 110, 10, text[i]);
						}
						if(i == 6 || i == 7) {
							drawNumber(i * 160 - 190, 10, text[i]);
						}
						if(i == 0 || i == 1) {
							drawNumber(i * 160, 10, text[i]);
						}

					}
					drawBalls();
				}, 100)
			}

			function addBall(ballx1, bally1, number) {
				for(var i = 0; i < numbers[number].length; i++) {
					var t1 = i * 20;
					for(var k = 0; k < numbers[number][i].length; k++) {
						var l1 = k * 20;
						if(numbers[number][i][k] == 1) {
							var vx = (Math.random() * 5) + 5;
							if(Math.random() > 0.5) {
								vx = -vx
							}
							var vy = (Math.random() * 10) + 5;
							if(Math.random() > 0.5) {
								vy = -vy
							}
							var r = parseInt(Math.random() * 256);
							var g = parseInt(Math.random() * 256);
							var b = parseInt(Math.random() * 256);
							var a = Math.random();
							var color = "rgba(" + r + "," + g + "," + b + "," + a + ")";

							balls.push([ballx1 + l1, bally1 + t1, 10, vx, vy, color]);
						}
					}
				}

			}

			function drawBalls() {
				for(var i = 0; i < balls.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = balls[i][5];
					ctx.arc(balls[i][0], balls[i][1], balls[i][2], 0, 2 * Math.PI);
					ctx.fill();
					balls[i][0] = balls[i][0] + balls[i][3];
					balls[i][1] = balls[i][1] + balls[i][4];
					balls[i][4] = balls[i][4] + 3;
					if(balls[i][1] > canvas.height - balls[i][2]) {
						balls[i][1] = canvas.height - balls[i][2];
						balls[i][4] = -balls[i][4] * 0.8;

					}
				}
			}

			function drawNumber(arcx, arcy, num) {
				var number1 = numbers[num];
				var R = 10;

				//bulingbulingbuling
				//				var r = parseInt(Math.random() * 256);
				//				var g = parseInt(Math.random() * 256);
				//				var b = parseInt(Math.random() * 256);
				//ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
				ctx.fillStyle = 'pink'
				for(var i = 0; i < number1.length; i++) {

					y = 2 * R * i + arcy;
					for(var k = 0; k < number1[i].length; k++) {
						//						if(number1[i][k] == 0) {
						//							ctx.fillStyle = "black";
						//						}
						if(number1[i][k] == 1) {
							ctx.beginPath();
							x = 2 * R * k + arcx + 340;
							ctx.arc(x, y, R, 0, 2 * Math.PI);
							ctx.fill();
						}

					}

				}
			}
		</script>
	</body>

</html>